<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KubeDiagrams Interactive Viewer</title>
  <!-- cytoscape -->
  <script src="https://cdn.jsdelivr.net/npm/cytoscape@3.32.0/dist/cytoscape.min.js"></script>

  <!-- layout dagre -->
  <script src=https://cdn.jsdelivr.net/npm/dagre@0.8.5/dist/dagre.min.js></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script>

  <!-- layout klay -->
  <script src="https://cdn.jsdelivr.net/npm/klayjs@0.4.1/klay.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.4/cytoscape-klay.min.js"></script>

  <!-- cytoscape-context-menus -->
  <script src="https://cdn.jsdelivr.net/npm/cytoscape-context-menus@4.2.1/cytoscape-context-menus.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cytoscape-context-menus@4.2.1/cytoscape-context-menus.min.css">

  <!-- KubeDiagrams Interactive Viewer -->
  <script src="./script/defaultStyle.js"></script>
  <script src="./script/layout.js"></script>
  <script src="./script/itemAndFunctionMenus.js"></script>
  <script  src="./script/main.js"></script>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
  <h1><img style="vertical-align: middle;" src="KubeDiagrams.png" height="80"/> <text style="color: #326CE5;">Interactive Viewer</text></h1>
  <div class="buttons">
    Select a .dot_json file:
    <input type="file" id="fileInput"/>
    Choose a layout
    <div id="layoutButtons"></div>
    Save as
    <div id="saveButtons">
        <button id="savePNG">PNG</button>
        <button id="saveJPG">JPG</button>
    </div>
  </div>
  <div id="paper"></div>
  <pre id="tooltip"></pre>
</body>
</html>